<template>
  <el-steps-box
    ref="baseStep"
    :steps="steps"
    pre-step-button-text="上一页"
    next-step-button-text="下一页"
    submit-button-text="提交"
    :is-validate="true"
    :active="active"
    @submit="submitMethod"
    @validate="validateMethod"
    @change="changeStepMethods"
  >
    <template #default>
      <!-- 中间部分内容 -->
      <div v-if="active === 0">
        <h2>Step 1 Content</h2>
        <p>Some content for step 1.</p>
      </div>
      <div v-else-if="active === 1">
        <h2>Step 2 Content</h2>
        <p>Some content for step 2.</p>
      </div>
      <div v-else>
        <h2>Step 3 Content</h2>
        <p>Some content for step 3.</p>
      </div>
    </template>
    <!-- 按钮插槽 -->
    <template #actions>
      <el-button
        type="primary"
        @click="save"
      >
        暂存
      </el-button>
    </template>
  </el-steps-box>
</template>

<script lang="ts" setup name="step-index">
import { ref } from 'vue';

const steps = ['Step 1', 'Step 2', 'Step 3'];
const baseStep = ref();

const active = ref(0);
const submitMethod = () => {
  console.log('====================================');
  console.log('click submit');
  console.log('====================================');
};
const save = () => {
  console.log('====================================');
  console.log('click save');
  console.log('====================================');
};
const validateMethod = () => {
  console.log('====================================');
  console.log('click downStep');
  console.log('====================================');
  baseStep.value.nextStep();
};
const changeStepMethods = (newVal: number, oldVal: number) => {
  active.value = newVal;
  console.log('====================================');
  console.log(newVal, oldVal);
  console.log('====================================');
};
</script>
